<template>
  <!-- 单元格容器 -->
  <van-cell-group>
    <!-- 顶部课程信息 -->
    <van-cell class="course">
      <!-- 课程图片 -->
      <img :src="courseInfo.courseImgUrl"/>
      <div>
        <!-- 课程名称 -->
        <p v-text="courseInfo.courseName"></p>
        <!-- 价格 -->
        <p>¥ {{courseInfo.discounts}}</p>
      </div>
    </van-cell>
    <!-- 中间用户信息 -->
    <van-cell class="user">
      <p>购买信息</p>
      <p>购买课程后使用此账号登录【拉勾教育】学习课程</p>
      <!-- 当前用户手机号 -->
      <p>当前账号：{{phone}}</p>
    </van-cell>
    <!-- 支付信息 -->
    <van-cell class="pay">
      <p>支付方式</p>
      <!-- 结合cell的单选框 -->
      <van-radio-group v-model="radio">
        <!-- 单选框 -->
        <van-cell-group>
          <van-cell title="单选框 1" clickable @click="radio = '1'">
            <!-- 插槽 -->
            <template #title>
              <img src="http://www.lgstatic.com/lg-app-fed/pay/images/wechat_b787e2f4.png" alt="">
              <span class="custom-title">微信支付</span>
            </template>
            <!-- 插槽 -->
            <template #right-icon>
              <van-radio name="1"  checked-color="#fbc547" />
            </template>
          </van-cell>
          <van-cell title="单选框 2" clickable @click="radio = '2'">
            <template #title>
              <img src="http://www.lgstatic.com/lg-app-fed/pay/images/ali_ed78fdae.png" alt="">
              <span class="custom-title">支付宝支付</span>
            </template>
            <template #right-icon>
              <van-radio name="2"  checked-color="#fbc547" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <!-- 立即购买按钮 -->
      <van-button @click="buyCourse">¥ {{courseInfo.discounts}} 立即支付</van-button>
    </van-cell>
  </van-cell-group>
</template>

<script>
// 引入接口：获取课程信息
import { getCourseById } from '@/api/course'
// 引入接口：创建订单、获取支付方式、发起支付，查询支付状态
import { saveOrder, saveOrderBuy, getPayResult } from '@/api/pay'
// import { getPayInfo } from '@/api/pay'
export default {
  name: 'pay',
  // 参数
  props: {
    // 路径参数
    courseId: {
      type: [Number, String],
      required: true
    }
  },
  data () {
    return {
      // 课程信息
      courseInfo: {},
      // 当前选择的支付方式
      radio: null,
      // 创建的订单号（不是发起支付的订单号）
      orderNo: ''
    }
  },
  // 钩子函数
  created () {
    // 获取课程信息
    this.getCourse()
  },
  methods: {
    // 立即支付按钮点击事件
    async buyCourse () {
      // 调用接口创建订单
      const { data } = await saveOrder({
        goodsId: this.courseId
      })
      // 如果创建成功将订单好存储起来（也可以不存储）
      if (data.state === 1) this.orderNo = data.content.orderNo
      // 调用接口获取支付方式，利用上面创建的订单号（这个可以不要，我这里只是尝试获取一下）
      // const { data: data2 } = await getPayInfo(data.content.orderNo)
      // console.log(data2)
      // 调用接口发起支付，使用上面的订单号、支付方式，returnUrl必须有但是可以随便填
      const { data: data3 } = await saveOrderBuy({
        goodsOrderNo: data.content.orderNo,
        channel: this.radio === 1 ? 'weChat' : 'aliPay',
        returnUrl: 'http://edufront.lagou.com/'
      })
      // 如果发起成功跳转支付（这里使用支付宝，因为微信的方式有点问题）
      if (data.state === 1) window.location.href = data3.content.payUrl
      // 创建定时器轮询
      const timer = setInterval(async () => {
      // 调用接口不断查询支付状态
        const { data: data4 } = await getPayResult({
          orderNo: data3.content.orderNo
        })
        // 一旦发现返回的数据status = 2（代表支付成功）
        if (data4.content.status === 2) {
          // 停止定时器
          clearInterval(timer)
          // 跳转学习页面
          this.$router.push('/study')
        }
      }, 1000)
    },
    // 获取课程信息
    async getCourse () {
      // 调用接口
      const { data } = await getCourseById(this.courseId)
      // 获取成功将获取到的信息传递给data
      if (data.state === 1) this.courseInfo = data.content
    }
  },
  // 计算属性
  computed: {
    // 处理用户手机号
    phone () {
      // 使用replace正则替换中间四位为*
      return this.$store.state.user.organization.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
    }
  }
}
</script>

<style lang="scss" scoped>
// 整体容器
body > .van-cell-group {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f8f9fa;
}
// 去掉所有单元格底部分割线
.van-cell::after {
  display: none;
}
// 顶部课程信息
.course {
  padding: 40px 20px 0;
  margin-bottom: 10px;
  .van-cell__value {
    display: flex;
    height: 130px;
    img {
      width: 80px;
      height: 107px;
      border-radius: 10px
    }
    div {
      display: flex;
      height: 107px;
      box-sizing: border-box;
      flex-direction: column;
      justify-content: space-between;
      padding: 5px 20px;
      p {
        margin: 0;
      }
      p:nth-child(1) {
        font-size: 16px;
      }
      p:nth-child(2) {
        font-size: 22px;
        color: #ff7452;
        font-weight: 700;
      }
    }
  }
}
// 中间用户信息
.user {
  padding: 10px 16px;
  margin-bottom: 10px;
  p {
    margin: 0;
  }
  p:nth-child(2) {
    font-size: 12px;
    color: #999;
  }
  p:nth-child(3) {
    margin: 20px 0 10px;
    font-size: 16px;
  }
}
// 底部支付信息
.pay {
  // 底部撑满剩余高度
  flex: 1;
  van-cell_value {
    padding: 40px;
  }
  .van-cell-group::after {
      display: none;
  }
  .van-cell--clickable {
    padding: 20px 10px;
    .van-cell__title {
      display: flex;
      align-items: center;
      img {
        width: 28px;
        height: 28px;
      }
      span {
        margin-left: 10px;
        font-size: 16px;
      }
    }
  }
  // 立即购买按钮
  .van-button {
    position: absolute;
    bottom: 10px;
    width: 100%;
    border-radius: 22px;
    background-image: linear-gradient(to right, #fbc547, #faad4a);
    font-size: 18px;
  }
}
</style>
